<template>
  <div id="app">
    <input type="text" placeholder="请输入用户名" v-model="username" /><br/>
    <input type="text" placeholder="请输入密码" v-model="password" /><br/>
    <button type="button" @click="doLogin()">登录</button>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr style="font-size:16px;color:#FFFFFF;">
        <td height="40" align="center" bgcolor="#3399FF">ID</td>
        <td align="center" bgcolor="#3399FF">标题</td>
        <td align="center" bgcolor="#3399FF">图片</td>
        <td align="center" bgcolor="#3399FF">日期</td>
      </tr>
      <tr style="font-size:0.28rem;" v-for="(item,index) in news" :key="index">
        <td height="40" align="center">{{item.id}}</td>
        <td align="center">{{item.title}}</td>
        <td align="center"><img :src="item.image" style="width:4rem;height:2rem;" /></td>
        <td align="center">{{item.date}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import "./mock";
export default {
  name: 'app',
  data(){
    return {
      news:[],
      username:"",
      password:""
    }
  },
  components: {

  },
    created(){
      /*eslint-disable*/
    let i=0;
    i++;
    console.log(i);
    /*eslint-enable*/
      // console.log(process.env.VUE_APP_DOMAIN);
      console.log(process.env.VUE_APP_API);
      // $.get("/api/home/index/slide?token=1ec949a15fb709370f",(res)=>{
      //     console.log(res);
      // });
      $.get("/api/news", (res)=> {
        // console.log(res);
        let jsonRes=JSON.parse(res);
        this.news=jsonRes.data;
      });
    },
  methods:{
    doLogin(){
      if (this.username.match(/^\s*$/)){
        alert("请输入用户名");
        return;
      }
      if (this.password.match(/^\s*$/)){
        alert("请输入密码");
        return;
      }
      $.post("/api/user/login",{username:this.username, password: this.password},(res)=>{
        console.log(res);
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
